<template>
  <view class="content">
    <view v-if="newsList.length === 0" class="loading-state">
      <text>加载中...</text>
    </view>
    <view class="news-item" v-else v-for="(news, index) in newsList" :key="index">
      <image :src="news.pic" mode="widthFix" class="news-img"></image>
      <view class="news-info">
		  <a :href="news.weburl" class="weburl">
			  <text class="news-title">{{ news.title }}</text>
		  </a>

        <view class="news-meta">
          <text class="news-source">{{ news.src }}</text>
          <text class="news-time">{{ news.time }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import newsData from './news.json';
export default {
  data() {
    return {
      newsList: newsData.result.list
    };
  },
  onReady() {
    
  },
  methods: {
    
  }
};
</script>

<style scoped>
.content {
  padding: 15rpx;
}

.loading-state {
  text-align: center;
  padding: 50rpx 0;
  color: #999;
  font-size: 28rpx;
}

.news-item {
  display: flex;
  flex-direction: row; 
  padding: 15rpx 0; 
  border-bottom: 1px solid #f5f5f5;
}

.news-img {
  width: 180rpx; 
  height: 120rpx; 
  margin-right: 15rpx; 
}

.news-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.news-title {
  font-size: 25rpx; 
  font-weight: ;
  color: #333;
  line-height: 40rpx; 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.news-meta {
  display: flex;
  justify-content: space-between; 
  color: #999; 
  font-size: 24rpx;
  margin-top: 8rpx;
}

.news-source {
  color: #666; 
}

.news-time {
  color: #999;
}
</style>